<template>
	<view class="content">
		<view class="top">
			<view class="top-left" @tap="toHome">
				<image :src="imgurl"></image>
			</view>
			<view class="top-center">
				<image src="../../static/index/fire.png" @tap="test"></image>
			</view>
			<view class="top-right">
				<view class="search">
					<image src="../../static/index/search.png" @tap="search"></image>
				</view>
				<view class="add">
					<image src="../../static/index/add.png" @tap="test2"></image>
				</view>
			</view>
		</view>
		<view class="msg">
			<view class="msg-list" v-for="item in info" :key="item.id" hover-class="click">
				<view class="msg-list-left">
					<image :src="item.image"></image>
					<view class="tip" v-if="item.tip>0">{{item.tip}}</view>
				</view>
				<view class="msg-list-right">
					<view class="msg-list-right-top">
						<view class="name">{{item.name}}</view>
						<view class="time">{{item.time}}</view>
					</view>
					<view class="msg-list-right-bottom">{{item.msg}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import info from "../../common/indexData.js"
	export default {
		data() {
			return {
				info: info.data(),
				id: '',
				imgurl: '',
				name: ''
			}
		},
		onLoad() {
			const value = uni.getStorageSync('user');
			this.id = value.id
			this.imgurl = this.url + '/user/' + value.imgurl
			this.name = value.name
		},
		methods: {
			// test(){
			// 	uni.request({ //获取用户信息api
			// 		url: ip + '/user/userDetail',
			// 		data:{
			// 			id:'5f18499b9d1b21169c16798f'
			// 		},
			// 		method:'POST',
			// 		success: (res) => {
			// 			console.log(res.data.result)
			// 		}
			// 	})
			// },
			// test2(){
			// 	uni.request({
			// 		url: ip + '/user/userUpdate',
			// 		data:{
			// 			// pwd:'12345678',
			// 			id:'5f18499b9d1b21169c16798f',
			// 			type:'name',
			// 			data:'M',
			// 		},
			// 		method:'POST',
			// 		success: (res) => {
			// 			console.log(res.data)
			// 		}
			// 	})
			// },
			search() {
				uni.navigateTo({
					url: "../search/search",
					animationType: 'pop-in'
				})
			},
			toHome() {
				uni.navigateTo({
					url: "../userHome/userHome?id="+this.id,
					animationType: 'pop-in'
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "../../common/top.scss";

	.top {
		.top-left {
			margin-left: $uni-spacing-col-base;
			height: 68rpx;

			image {
				border-radius: 16rpx;
				width: 68rpx;
				height: 68rpx;
			}
		}

		.top-center image {
			position: absolute;
			margin-top: var(--status-bar-height);
			top: 24rpx;
			text-align: center;
			width: 88rpx;
			height: 42rpx;
		}

		.top-right {
			display: flex;
			flex-direction: row;
			height: 52rpx;

			image {
				width: 52rpx;
				height: 52rpx;
				margin-right: $uni-spacing-col-base;
			}
		}
	}

	.msg-list:nth-child(1) {
		margin-top: 88rpx;
	}

	.msg-list:nth-last-child {
		margin-bottom: $uni-spacing-col-base;
	}

	.click {
		background-color: $uni-bg-color-hover;
	}

	.msg-list {
		padding: 0 32rpx;
		width: 100%;
		height: 128rpx;
		display: flex;
		flex-direction: row;
		justify-content: start;

		.msg-list-left {
			margin-top: 16rpx;
			height: 96rpx;
			position: relative;

			.tip {
				background-color: red;
				border-radius: 18rpx;
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				text-align: center;
				line-height: 36rpx;
				font-size: $uni-font-size-sm;
				color: white;
			}

			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 24rpx;
			}
		}

		.msg-list-right {
			width: 558rpx;
			margin-left: 32rpx;
			margin-top: 16rpx;

			.msg-list-right-top {
				height: 50rpx;
				line-height: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.name {
					font-size: 36rpx;
				}

				.time {
					font-size: $uni-font-size-sm;
					color: $uni-text-color-disable;
				}
			}

			.msg-list-right-bottom {
				height: 40rpx;
				line-height: 40rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
				overflow: hidden; //溢出隐藏
				text-overflow: ellipsis; //文字溢出加省略号后缀
				white-space: nowrap //不换行
			}
		}
	}
</style>
